<template>
	<view class="cart-container" v-if="carts.length!==0">
		<!-- 地址区域 -->
		<my-address></my-address>
		<!-- 购物车标题栏区域 -->
		<view class="cart-title">
			<!-- 左边图标区域 -->
			<uni-icons type="shop" size="18" ></uni-icons>
			<!-- 右边标题 -->
			<text class="cart-title-text">购物车</text>
			<view></view>
		</view>
		
		<!-- 商品列表区域 -->
		<uni-swipe-action>
			<block v-for="(goods,i) in carts" :key="i">
				<uni-swipe-action-item :right-options="options" @click="removeGoods(goods)">
					<my-goods :goods="goods" showRadio="ture" showNum="true" @radio_change="radioChangeHandler" @num_change="numChangeHandler"></my-goods>
				</uni-swipe-action-item>				
			</block>			
		</uni-swipe-action>
		<view class="goods-buttom">
			<text>------到底了------</text>
		</view>
		
		<!-- 结算组件 -->
		<my-settle></my-settle>
	</view>
	<view class="empt-cart" v-else>
		<image class="empt-img" src="../../static/cart-empt.png"></image>
		<view class="empt-text">空空如也~</view>
	</view>
</template>

<script> 
	import {mixinsTest} from '@/mixins/tabbar-badge.js'
	import {mapState,mapMutations} from 'vuex'

	export default {
		mixins:[mixinsTest],
		computed:{
			...mapState('cart',['carts'])
		},
		data() {
			return { 
				options:[{
					text:'删除',
					style:{
						color:'#ffffff',
						backgroundColor:'#C00000'
					}
				}]
			};
		},
		watch:{
			total(){
				
				this.setBadge()
				}
		},		
		methods:{
			radioChangeHandler(e){
				this.changeGoosState(e)
			},
			...mapMutations('cart',['changeGoosState','changeGoosCount','removeGoodsById']),
			numChangeHandler(e){
				this.changeGoosCount(e)
				//this.setBadge()
			},
			removeGoods(goods){
				this.removeGoodsById(goods)
				//this.setBadge()
			},
			
			
			
		},
		
	
	
	}
</script>

<style lang="scss"> 
.cart-container{
	padding-bottom: 50px; 
}
.cart-title{
	height: 40px;
	display: flex;
	align-items: center;
	padding-left: 5px;
	border-bottom: 1px solid #efefef;
	.cart-title-text{
		padding-left: 10px;
		font-size: 14px;
	}
}
.empt-cart{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 150px;
	.empt-img{
		width: 90px;
		height: 90px;
		
	}
	.empt-text{
		font-size: 12px;
		color: grey;
		padding-top: 15px;
	}
}
.goods-buttom{
	height: 50px;
	background-color: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color:grey;
}

</style>
